<template>
  <div class="container">
     <input type="text" :value="value" :placeholder="name.tip" @input="input" :maxlength="name.number" @confirm="finish"  />
     <span class="number">{{number}}/{{name.number}}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      number:0,
      name:{
        number:'',
        tip:''
      },
      type:"",
      value:""
  }
 },
  methods: {
   input(e){
    this.number=e.target.value.length;
    if(this.type=='name')
    {
      this.information.name=e.target.value
      this.value=e.target.value
    }else if(this.type=="sign")
    {
      this.information.sign=e.target.value
      this.value=e.target.value
    }else{
      this.information.weChatNumber=e.target.value
      this.value=e.target.value
    };
   },
   finish(e){
     //点击确定按钮时候执行
    this.$store.dispatch('setInformation',this.information)
    wx.navigateTo({
      url:'../information/main'
    })
   }
  },
  computed:{
    information(){
      return this.$store.state.information;
    }
  },
  onLoad: function(option){
    this.type=option.id;
    if(this.type=='name')
    {
      this.name.tip="请输入你的姓名";
      this.name.number='15';
      this.value=this.information.nickname;
      this.number=this.information.nickname.length;
    }else if(this.type=="sign")
    {
      this.name.tip="请输入你的个性签名";
      this.name.number='30';
      this.value=this.information.sign;
      this.number=this.information.sign.length;
    }else{
      this.name.tip="请输入你的微信号";
      this.name.number='10';
      this.value=this.information.weChatNumber;
      this.number=this.information.weChatNumber.length;
    }
  }
}
</script>
<style scoped>
input{width: 90%;margin-left: 5%;border-bottom: 1px solid red;height: 50px; word-wrap: break-word; word-break: normal;}
.number{width: 30px;height: 20px;line-height: 20px;display: block;float: right;margin-right: 30px;margin-top: 5px;}
</style>
